<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-xiangzuo1" @tap="backPage"></view>
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">{{pageTitle}}</view>
		</view>	
		<view class="bg_box">
			<image class="bg01" :src="getImgSrc('/static/bg05.png')" mode="widthFix"></image>
			<view class="bg_content">
				<view class="main">
					<view class="ceng">
						<view class="hao" v-if="type==0">车辆维修保养记录</view>
						<view class="hao" v-if="type==2">里程查询({{price}}元)</view>
						<view class="hao" v-if="type==4 || type==1">车信盟报告检查({{price}}元)</view>
						<view class="hao" v-if="type==6">维保记录+出险记录({{price}}元)</view>
						<view class="hao" v-if="type==7">电池查询({{price}}元)</view>
						<view class="note" v-if="type==0">精准查二手车,泡水车,事故车在4S的维保记录</view>
						<view class="note" v-if="type==2">公里数查询</view>
						<view class="note" v-if="type==4 || type==1">目前业内公认最权威、最准确、大事故展现最好的出险报告，查得和准确率99.9%</view>
						<view class="note" v-if="type==6">目前业内公认最权威、最准确、大事故展现最好的出险报告，查得和准确率99.9%</view>
						<view class="note" v-if="type==7">电池查询</view>
					</view>
					<view class="kuai">
						<view class="list">
							<view class="left">
								<view class="red">*</view>
								<view class="text">行驶证图片</view>
							</view>
							<view class="right">证件图完整清晰无遮挡</view>
						</view>
						<image v-if="type==0" @click="previewImg([img_path],0)" :src="img_path" mode="" style="width: 280px; height: 200px;"></image>
						<view class="upload" v-if="type>0">
							<u-upload :fileList="fileList6" @afterRead="afterRead" @delete="deletePic" name="6" multiple :maxCount="1" width="280" height="200">
								<image :src="img_path" mode="" style="width: 280px; height: 200px;"></image>
							</u-upload>
						</view>
						<view class="list">
							<view class="left">
								<view class="red">*</view>
								<view class="text">车架号</view>
							</view>
							<!-- <view class="right">什么是车架号（VN）号</view> -->
						</view>
						<view class="box">
							<input type="text" value="" v-model="vinstr" placeholder="请输入17位车架号" />
						</view>
						
					</view>
				</view>
				<!-- <view class="check" :data-url="'/pages/index/service_log?stype='+type" @click="gotopage">查看记录</view> -->
				<!-- <view class="agree">
					<checkbox style="scale: 0.7;" color="#FF7F22" :checked="checked" @tap="checkedAuto"></checkbox>
					<view class="a_txt">使用本服务表明您已同意
						<view class="a_t2" @click="$r('/pages/public/art_detail?id=1')">《用户协议》</view>
					</view>
				</view> -->
				<view class="agree_2">
					<view class="title">查询须知</view>
					<view>1.查询历史车架号将不再扣除次数或收取费用;</view>
					<view>2.由于查询量比较大，有时可能存在延迟或者卡单，请勿着急，可以联系当地运营人员或全国客服专用微信，或拨打:13866660591;</view>
					<view class="third">3.声明:查询结果信息取决于第三方采集的信息。本平台无法保证查询信息的准确性、及时性和完整性。该报告仅作为您评估车辆的重要信息之一。车况请您结合实际甄别。</view>
				</view>
				<view class="confirm" @click="confirm_order()">立即查询</view>
				
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page:1,
				scrrol:false,
				info:'',
				pageTitle:'',
				type:0,
				checked:true,
				fileList6:[],
				vinstr: '',
				price:'',
				sure_show:false,
				chanle_params:[],
				sure_list:[],
				pay_price:0,
				img_path:this.getImgSrc('/static/xsz.png'),
				img_change : 0,
				is_wb:0,
				id:0,
			}
		},
		onLoad(e) {
			let that = this;
			that.pageTitle = e.title;
			that.type = e.type;
			that.loadData();
			let order = uni.getStorageSync('car_order0');
			that.order = order;
			if(order?.img_path){
				that.img_path = that.order.img_path;
			}
			that.vinstr = that.order.vin;
			that.is_wb = e.is_wb;
			that.id = order.id;
		},
		onUnload() {
			uni.setStorageSync('car_order0','');
		},
		methods: {
			setRule(e){
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.flowList[index].tick = !that.flowList[index].tick
			},
			loadData() {
				let that = this;
				that.Net._get('other/search_price', {type:that.type}, res => {
					if (res.code == 1) {
						that.price = res.data.price;
					}
				});
			},
			checkedAuto() {
				let that = this;
				that.checked = !that.checked;
			},
			confirm_order(){
				if(!this.checked){
					this.Msg.Fail('请勾选用户协议');
					return '';
				}
				if (this.checkVIN(this.vinstr) == false){
					this.Msg.Fail('车架号格式有误,请检查');
					return '';
				}
				let stu = parseInt(this.order.status);
				console.log(stu)
				if(stu == 2 || stu == 4){
					this.Msg.Fail('正在查询中，或查询失败，可联系客服退款');
					return '';
					// this.throttle(this.real_confirm_order(), 1500)
				}else if(stu == 1){
					this.throttle(this.real_confirm(), 1500)
				}else if(stu == 3){
					this.Msg.Fail('已查询成功,请重进小程序');
					return '';
				}
				
			},
			// 复查
			async real_confirm_order(){
				uni.showLoading({
					title: '请稍后'
				});
				let param = {
					img_data: this.img_path,
					img_change : this.img_change,
					vin: this.vinstr,
					stype : this.stype,
					order_id : this.order.id
				};
				let url = 'auth/index/review_wb'; 
				if (this.is_wb == 1){
					let url = 'lemon/research'; 
				}
				that.Net._get(url, param, res => {
					if (res.code == 1) {
						this.content = res.msg;
						this.model_act();
					}else{
						this.Msg.Fail(res.msg);
					}
				});	
			},
			async real_confirm() {
				uni.hideLoading();
				let that = this;
				let data = {
					order_id: this.id,
					money: this.order.pay_price,
					plat: 'miniapp'
				};
				console.log(1134);
				that.Net._post('auth/order/car_pay', data, rex => {
					if (rex.code == 1) {
						let orderData = rex.data;
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp:orderData.timeStamp,
							nonceStr: orderData.nonceStr,
							package: orderData.package,
							signType: orderData.signType,
							paySign: orderData.paySign,
							success: function(res) {
								uni.showModal({
									title: '提示',
									content: '提交成功,稍后可查看报告',
									showCancel: false,
									success: function(res) {
										if (res.confirm) {
											//console.log('用户点击确定');
											uni.switchTab({
												url: '/pages/service/service'
											});
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								});
								console.log('success:' + JSON.stringify(res));
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
								uni.switchTab({
									url: '/pages/service/service'
								});
							}
						});
					}
				});
			},
			throttle(fn, delay) {
				let timer = null;
				return function() {
					let context = this, args = arguments;
					if (!timer) {
						timer = setTimeout(() => {
							fn.apply(context, args);
							timer = null;
						}, delay);
					}
				};
			},
			// 行驶证识别
			check_ocr(base64){
				let token = uni.getStorageSync('_TOKEN_')
				if (!token) {
					uni.navigateTo({
						url: '/pages/public/login'
					});
					return '';
				}
				let param = {base64_img : base64};
				this.Net._post('auth/index/check_api_ocr', param, res => {
					if (res.code == 1){
						this.vinstr = res.data.VIN; 
					}else{
						this.Msg.Fail(res.msg);
						return '';
					}
				});
			},
			checkVIN(VIN){
			    if(typeof(VIN)!='string') return false;
			    if(VIN.length!=17) return false;
			    VIN=VIN.toUpperCase();
			    let RE= /^[A-HJ-NPR-Z\d]{8}[X\d][A-HJ-NPR-Z\d]{3}\d{5}$/
			    if(!RE.test(VIN)) return false;
			    let cOT={
			        '0':0,'1':1,'2':2,'3':3,'4':4,'5':5,'6':6,'7':7,
			        '8':8,'9':9,'A':1,'B':2,'C':3,'D':4,'E':5,'F':6,
			        'G':7,'H':8,'J':1,'K':2,'L':3,'M':4,'N':5,'P':7,
			        'R':9,'S':2,'T':3,'U':4,'V':5,'W':6,'X':7,'Y':8,
			        'Z':9
			    };
			    let xWT= [8,7,6,5,4,3,2,10,0,9,8,7,6,5,4,3,2]; // 因为第9位权重为0，所以原来是什么字符不影响结果，可以方便后面计算
			    let sum= 0;
			    let VINs= VIN.split('');
			    for(let i=0;i<17;i++){
			        sum=sum + cOT[ VINs[i] ] * xWT[i];
			    }
			    let cT=['0','1','2','3','4','5','6','7','8','9','X'];
			    if( cT[ (sum%11) ] == VINs[8]) return true;
			    return false;
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				let finallPath;
				for (let i = 0; i < lists.length; i++) {
					if (lists[i].size < this.m2) {
						finallPath = await exchangeFile(lists[i].url)
					} else {
						//图片大于2M，走压缩
						finallPath = await compressImage.call(this, lists[i].url); // 压缩图片
					}
					let result = await this.urlTobase64(finallPath);
					this.check_ocr(result);
			
					let item = this[`fileList${event.name}`][fileListLen]
					this.img_change = 1;
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			urlTobase64(url) {
				var promise = new Promise((resolve, reject) => {
					// #ifdef MP-WEIXIN
					uni.getFileSystemManager().readFile({
						filePath: url, //选择图片返回的相对路径
						encoding: 'base64', //编码格式
						success: res => { //成功的回调
							//console.log(res);
							let base64 = 'data:image/jpeg;base64,' + res.data //不加上这串字符，在页面无法显示的哦
							resolve(base64);
						},
						fail: (e) => {
							console.log("图片转换失败");
							reject(0);
						}
					})
					// #endif
					// #ifndef MP-WEIXIN
					uni.request({
						url: url,
						method: 'GET',
						responseType: 'arraybuffer',
						success: ress => {
							let base64 = wx.arrayBufferToBase64(ress.data); //把arraybuffer转成base64 
							//	console.log(base64)
							base64 = 'data:image/jpeg;base64,' + base64 //不加上这串字符，在页面无法显示的哦
							resolve(base64);
						},
						fail: (e) => {
							console.log("图片转换失败");
							reject(0);
						}
					})
					// #endif
				});
				return promise;
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},

		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
		onReachBottom() {
		  var that = this;
		  that.page++;
		  
		},
	}
</script>

<style lang="scss">
	
	.header{
		background-color: transparent !important;
		height: 18vw !important;
	}
	
	.header .text{
		background-color: transparent !important;
		color: #333 !important;
	}
	
	.header .back{
		color: #333 !important;
	}
	
	.scrrolHeader{
		background-color: #F9E9E3 !important;
	}
	
	.bg_box{
		width: 100%;
		position: relative;
	}
	
	.bg_box .bg01{
		width: 100%;
	}
	
	.bg_box .bg_content{
		width: 92%;
		position: absolute;
		left: calc(50% - 46%);
		top: calc(13.5vw + var(--status-bar-height));
		z-index: 98;
	}
	
	.main{
		width: calc(100%);
		background-color: #fff;
		padding:7vw 4vw;
		height:30vw;
		border-radius: 3vw;
		.img{
			width: 20%;
			float: right;
		}
		.ceng{
			position: absolute;
			z-index: 1;
			width: 80%;
			
			.title{
				color: #0d172d;
				font-size: 4vw;
				font-weight: bold;
			}
			.note{
			color: #828792;
			font-size: 3.5vw;
			margin-top: 2vw;
			}
			.hao{
				color: #0d172d;
				font-size: 3.5vw;
				font-weight: bold;
				margin-top: 1vw;
			}
			
		}
		.kuai{
				background-color: #fff;
				border-radius: 3vw;
				width: 100%;
				position: absolute;
				padding: 4vw;
				left: 0;
				top:33vw;
				.list{
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 12vw;
					padding: 0vw 3vw;
					font-size: 3.5vw;
					.left{
						display: flex;
						.red{
							color: #fc0505;
							margin-right: 2vw;
						}
						.text{
							color: #0d172d;
						}
					}
					.right{
						color: #999;
					}
				}
				.upload{
					margin-left: calc(50% - 150px);
				}
				.box{
					width: 92%;
					margin: auto;
					input{
						border-bottom: 1px solid #dfdfe0;
						font-size: 3.5vw;
						height: 10vw;
						line-height: 10vw;
					}
				}
				
			}
	}
	.check{
		border:1px solid #d8a407;
		width: 20vw;
		text-align: center;
		height: 8vw;
		line-height: 8vw;
		border-radius: 8vw;
		font-size: 3.5vw;
		color: #d8a407;
		position: absolute;
		left: calc(50% - 10vw);
		top:128vw;
		}
	.agree{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 3.5vw;
			color: #999999;
			position: absolute;
			left: 0;
			// bottom: 150rpx;
			margin-top: 105vw;
			.a_icon{
				font-size: 5vw;
				color: #C8C8C8;
				padding-right: 20rpx;
				padding-top: 1rpx;
			}
			.a_icon_s{
				color: #267BFA;
			}
			.a_txt{
				display: flex;
				align-items: center;
				.a_t2{
					color: #257BF9;
				}
			}
		}
	.agree_2{
		width: 100%;
		// display: flex;
		align-items: center;
		justify-content: center;
		font-size: 3.5vw;
		color: #999999;
		position: absolute;
		left: 0;
		// bottom: 150rpx;
		margin-top: 105vw;
		.title{
			padding: 2vw;
			font-size: 4.5vw;
			color: #000;
		}
		.third{
			margin-bottom: 20vw;
		}
	}
	.confirm02{
		background-color: #FC5D20;
		color: #12161D;
		width: 92%;
		margin:5vw auto 0;
		text-align: center;
		font-size: 4vw;
		height: 12vw;
		line-height: 12vw;
		border-radius: 12vw;
		font-weight: bold;
		position: absolute;
		left: 4%;
		bottom: 30rpx;
	}
	
	image{
		width: 100%;
	}
	
	.inside {
		background-color: #f4f4f4;
		border-radius: 3vw 3vw 0vw 0vw;
		max-height: 100vw;
		overflow-y: auto;
		margin-top: 18%;
	}
	
	.inside .title {
		text-align: center;
		width: 100%;
		padding-top: 4vw;
		font-size: 4vw;
		font-weight: bold;
	}
	
	.inside .sub {
		width: 94%;
		margin: 3vw auto;
		background-color: #fff;
		border-radius: 2vw;
		padding: 2vw 4vw 4vw 4vw;
		box-sizing: border-box;
	}
	
	.inside .mw01 {
		font-size: 3.5vw;
		color: #22396d;
		border-bottom: 1px solid #ebebeb;
		height: 12vw;
		line-height: 12vw;
	}
	
	.inside .mw02 {
		font-size: 3.5vw;
		color: #22396d;
		padding: 3vw 0vw 3vw 0vw;
	}
	
	.inside .mw03 {
		font-size: 3.5vw;
		color: #787789;
	
	}
	
	.inside .mw04 {
		font-size: 3.6vw;
		color: #eaa152;
		display: flex;
		justify-content: space-between;
		padding-top: 3vw;
	}
	
</style>
